<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>姓名</p>
          <el-input v-model="qo.StudentName" placeholder="请输入姓名" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="4">
          <p>证件号码</p>
          <el-input v-model="qo.IdCardNumber" placeholder="请输入证件号码" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="4">
          <p>性别</p>
          <el-select v-model="qo.GenderCode" size="small" placeholder="请选择" @change="getPageList()">
            <el-option label="全部" :value="null" />
            <el-option label="男" value="M" />
            <el-option label="女" value="W" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>班级</p>
          <el-select v-model="qo.ClassName" size="mini" placeholder="请选择班级" @change="getPageList()">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>教练</p>
          <el-input v-model="qo.CoachName" placeholder="请输入教练" clearable size="mini" @change="getPageList()" />
        </el-col>
        <el-col :span="4">
          <p>实体卡</p>
          <el-select v-model="IsUseCard" size="small" placeholder="请选择" @change="getPageList()">
            <el-option label="全部" :value="null" />
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-col>
        <el-col :span="6" class="search_btn">
          <!-- 查询按钮 -->
          <el-button type="primary" size="mini" @click="getPageList()">筛选</el-button>
          <!-- 重置按钮 -->
          <el-button type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gl_mb_15">
      <el-button type="primary" size="mini" icon="el-icon-download">
        <a :href="getStaticFileUrl('/static/XKCReaderService.exe')">下载服务</a>
      </el-button>
      <el-button type="primary" :loading="testLoading" size="mini" @click="test">连接测试</el-button>
      <span style="color: #ABAEB3;font-size: 14px; margin: 10px 10px 0;">点击后，双嘀声表示连接成功</span>
      <el-button type="primary" size="mini" @click="reading">读卡</el-button>
    </div>
    <el-table v-loading="loading" class="gl_table_noBorder" :data="tableData" size="mini">
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="证件号码" prop="idCardNumber" />
      <el-table-column label="性别" prop="gender.name" align="center" />
      <el-table-column label="所在班级">
        <template slot-scope="{row}">
          <div v-for="(classs,index) in row.classStudents" :key="index">
            {{ classs.class.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="教练">
        <template slot-scope="{row}">
          <div v-for="coach in row.studentCoachs" :key="coach.id">
            {{ coach.employee && coach.employee.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实体卡" align="center">
        <template slot-scope="scope">
          {{ scope.row.clubCardStudents.length > 0 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" @click="bind(row)">绑定</el-button>
          <el-button size="mini" type="text" @click="edit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row class="gl_mt_15" style="text-align: right;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="qo.MaxResultCount"
        :current-page="qo.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <bindingBox ref="bindingBox" :student-id="studentId" :student-name="studentName" type="list" />
    <readCard ref="readCard" />
  </div>
</template>

<script>
import axios from 'axios';
import bindingBox from './bindingBox.vue';
import readCard from './readCard.vue';
import {
  Api_GET_ClubStudentQO
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubClass,
  api_GET_ClubStudent
} from '@/extend/api/hallswaggerApi/app';
export default {
  components: { bindingBox, readCard },
  data() {
    return {
      studentId: '',
      total: 0,
      qo: new Api_GET_ClubStudentQO(),
      chooseTime: [],
      loading: false,
      tableData: [],
      classList: [],
      testLoading: false,
      IsUseCard: null,
      studentName: ''
    };
  },
  mounted() {
    this.IsUseCard = null;
    this.getClass();
    this.getPageList();
  },
  // 固定写入数据块为块4，写入密码块为块7
  methods: {
    bind(item) {
      this.studentId = item.id;
      this.studentName = item.name;
      this.$refs.bindingBox.dialogVisible = true;
      this.$refs.bindingBox.init();
    },
    reading() {
      this.$refs.readCard.dialogVisible = true;
      this.$refs.readCard.init();
    },
    test() {
      const that = this;
      this.testLoading = true;
      axios
        .post('http://localhost:36881/M1/ControlBuzzer', {
          freq: 18,
          duration: 2
        })
        .then((res) => {
          that.testLoading = false;
          if (res && res.data && res.data.Status === 0) {
            console.log('连接成功');
          } else if (res && res.data && res.data.Status === 1) {
            that.$message({ type: 'error', message: res.data.Msg });
          } else if (res && res.data && res.data.Status === 800018) {
            that.$message({ type: 'error', message: '读卡设备不存在，请连接后重试！' });
          } else if (res && res.data && res.data.Status === 90001) {
            that.$message({ type: 'error', message: '缺少必要参数，请重试！' });
          }
        }, error => {
          that.testLoading = false;
          const _msg = error.message === 'Network Error' ? '网络错误，请下载并安装读卡服务后重试！' : error.message;
          that.$message({ type: 'error', message: _msg });
        });
    },
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.qo.IncludeStudentCoachs = true;
      this.qo.ClubCardStudents = true;
      this.qo.IncludeClassStudents = true;
      this.qo.IncludeGender = true;
      this.qo.IncludeFace = true;
      this.qo.IncludeStudentMembershipCards = true;
      this.qo.IsEnable = null;
      this.qo.IsUseCard = this.IsUseCard;
      this.qo.Sorting = 'creationTime DESC';
      this.loading = true;
      api_GET_ClubStudent(this.qo).then((res) => {
        this.loading = false;
        this.total = res.totalCount;
        this.tableData = res.items;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取班级列表
    getClass() {
      var that = this;
      api_GET_ClubClass({ HasScheduledCourse: null, IncludeCourse: true, IncludeClassStudent: false }).then(res => {
        that.classList = res.items || [];
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message || '获取班级列表失败' });
      });
    },
    edit(item) {
      this.$router.push({
        name: 'PhysicalCardDetail',
        query: {
          id: item.id
        }
      });
    },
    reset() {
      this.IsUseCard = null;
      this.qo = new Api_GET_ClubStudentQO();
      this.getPageList();
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_TEMPLATE_STATIC_FILE_RUL + relativeUrl;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: white;
}
</style>
